<template>
  <div class="welcome">
    <p class="today">今天又是一只 {{ emoji() }}</p>
    <div class="content">
      <h1>Q.MIS</h1>
      <div class="card-box">
        <div class="cul">
          <el-card>
            <span>运营管理</span>
          </el-card>
          <el-card>
            <span @click="go(disUrl)">分销管理</span>
          </el-card>
        </div>
        <div class="cul">
          <el-card>
            <span @click="go(sisUrl)">数据中心</span>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import emoji from 'utils/emoji';

  export default {
    data() {
      return {
        disUrl: process.env.VUE_APP_DIS_URL,
        sisUrl: process.env.VUE_APP_SIS_URL,
      };
    },
    methods: {
      emoji,
      go(val) {
        window.open(val);
      },
    },
  };
</script>

<style lang="less" scoped>
  .welcome {
    .today {
      margin-top: 10px;
      font-size: 30px;
    }

    .content {
      h1 {
        text-align: center;
        font-size: 50px;
      }
      .card-box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        .cul {
          flex-basis: 100%;
          display: flex;
          justify-content: space-around;
          /deep/ .el-card {
            cursor: pointer;
            width: 18vw;
            height: 25vh;
            line-height: 22vh;
            text-align: center;
            span {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>
